<div class="faculty">
    <div class="addprofile">
        <div class = "container-fluid">
            <form action="<?= $base_url?>fmis/faculty/uploadphoto" class="padding-top-30" method="post" enctype="multipart/form-data" id="formupload">
                <div class="col-lg-3  container-fluid">
                    <center>
                        <div class="image-holder-outer">
                            <img alt="140x140" class="img-responsive" id="profilepicture" src="<?= $base_url ?>images/members/blank.png"/>
                        </div>
                        <div class="col-lg-12 padding-top-30">
                            <label for="upload_photo" class="button" id="lbl_input_upload" >Upload new photo</label>
                            <p id="p_filename" >No File Selected Yet</p>
                            <?php echo form_upload(array('id' => 'upload_photo', 'name' => 'upload_photo', 'style' => "opacity:0;")) ?>
                        </div>
                        <div class="col-lg-12">
                            <button id="addprofilesubmit" class="button-submit">Add Profile</button>
                        </div>

                    </center>
                </div>
            </form>
            <form action="<?= $base_url?>fmis/faculty/addprofile" class="padding-top-30" method="post" id="formaddprofile">
                <div class = "col-lg-9">
                    <ul class="nav nav-tabs">
                        <li class ="active">
                            <a href="#basic" data-toggle="tab">Login Details</a>
                        </li>
                        <li>
                            <a href="#personal" data-toggle="tab">Personal Details</a>
                        </li>
                        <li>
                            <a href="#academic" data-toggle="tab">Academic Details</a>
                        </li>
                        <li>
                            <a href="#school" data-toggle="tab">School Details</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class = "tab-pane active container-fluid" id="basic">
                            <h3 style=" color:wheat">Login Information </h3>
                                <div class="container-fluid">
                                    <div class = "col-lg-3">Username:</div>
                                    <div class = "col-lg-9">
                                        <input type="text" id="reg_username" name="reg_username" value="<?= $username?>"/>
                                    </div>
                                </div>
                                <div class="container-fluid">
                                    <div class = "col-lg-3">Password:</div>
                                    <div class = "col-lg-9">
                                        <input type="password" id="reg_password" name="reg_password"/>
                                    </div>
                                </div>
                                <div class="container-fluid">
                                    <div class = "col-lg-3">Confirm Password:</div>
                                    <div class = "col-lg-9">
                                        <input type="password" id="reg_con_password" name="reg_con_password"/>
                                    </div>
                                </div>
                        </div>
                        <div class = "tab-pane container-fluid" id="personal">
                            <h3 style=" color:wheat">Personal Information</h3>
                            <div class="container-fluid">
                                <div class="col-lg-3">First Name:</div>
                                <div class="col-lg-9">
                                    <input type="text" id="edit_fname" name="edit_fname" value="<?= $fname?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Middle Name:</div>
                                <div class="col-lg-9">
                                    <input type="text" id="edit_mname" name="edit_mname" value="<?= $mname?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Last Name:</div>
                                <div class="col-lg-9"><input type="text" id="edit_lname" name="edit_lname" value="<?= $lname?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Gender:</div>
                                <div class="col-lg-9">
                                    <div id="div_edit_gender"></div>
                                    <select id="edit_gender" name="edit_gender">
                                        <option value="Male" <?php if($gender == "Male") echo 'selected' ?>>Male</option>
                                        <option value="Female" <?php if($gender == "Female") echo 'selected' ?>>Female</option>
                                    </select>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Birthdate:</div>
                                <div class="col-lg-9"><input type="text" id="edit_birthdate"name="edit_birthdate" value="<?= $birthday?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Citizenship:</div>
                                <div class="col-lg-9"><input type="text" id="edit_citizenship" name="edit_citizenship" value="<?= $citizenship?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Address:</div>
                                <div class="col-lg-9"><input type="text" id="edit_address" name="edit_address" value="<?= $address?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Civil Status:</div>
                                <div class="col-lg-9">
                                    <div id="div_civilstatus"></div>
                                    <select id="edit_civilstatus" name="edit_civilstatus">
                                        <option value="Single" <?php if($civilStatus == "Single") echo 'selected' ?>>Single</option>
                                        <option value="Married" <?php if($civilStatus == "Married") echo 'selected' ?>>Married</option>
                                        <option value="Divorced" <?php if($civilStatus == "Divorced") echo 'selected' ?>>Divorced</option>
                                        <option value="Widowed" <?php if($civilStatus == "Widowed") echo 'selected' ?>>Widowed</option>
                                        <option value="Live-in" <?php if($civilStatus == "Live-in") echo 'selected' ?>>Live-in</option>
                                    </select>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Religion:</div>
                                <div class="col-lg-9"><input type="text" id="edit_religion" name="edit_religion" value="<?= $religion?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Contact Number:</div>
                                <div class="col-lg-9"><input type="text" id="edit_contactno" name="edit_contactno" value="<?= $contactno?>"/>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Email Address:</div>
                                <div class="col-lg-9"><input type="text" id="edit_emailadd" name="edit_emailadd" value="<?= $email?>"/>
                                </div>
                            </div>

                        </div>
                        <div class = "tab-pane container-fluid" id="academic">
                            <h3 style=" color:wheat">Academic Information</h3>
                            <div class="container-fluid">
                                <div class="col-lg-3">Degree:</div>
                                <div class="col-lg-9">
                                    <div id="div_degree"></div>
                                    <select id="edit_degree" name="edit_degree">
                                        <?php
                                        foreach ($tblDegree as $row) {
                                            $selected = '';
                                            if ($profileDepartment == $row['Description'])
                                                $selected = 'selected';
                                            echo '<option value="' . $row['DegreeID'] . '" ' . $selected . '>
                                                     ' . $row['Description'] . '
                                                 </option>';

                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Specialization:</div>
                                <div class="col-lg-9">
                                    <input type="text" id="edit_special" name="edit_special" value="<?= $special?>"/>
                                </div>
                            </div>
                        </div>
                        <div class = "tab-pane container-fluid" id="school">
                            <h3 style=" color:wheat">School Information</h3>
                            <div class="container-fluid">
                                <div class="col-lg-3">Status:</div>
                                <div class="col-lg-9">
                                    <div id="div_status"></div>
                                    <select id="edit_status" name="edit_status">
                                        <?php
                                        foreach ($tblStatus as $row) {
                                            $selected = '';
                                            if ($status == $row['StatusDescription'])
                                                $selected = 'selected';
                                            echo '<option value="' . $row['StatusID'] . '" ' . $selected . '>
                                                      ' . $row['StatusDescription'] . '
                                                 </option>';
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Rank:</div>
                                <div class="col-lg-9">
                                    <div id="div_rank"></div>
                                    <select id="edit_rank" name="edit_rank">
                                        <?php
                                        foreach ($tblRank as $row) {
                                            $selected = '';
                                            if ($rank == $row['RankDescription'])
                                                $selected = 'selected';
                                            echo '<option value="' . $row['RankID'] . '" ' . $selected . '>
                                                     ' . $row['RankDescription'] . '
                                                  </option>';
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <div class="container-fluid">
                                <div class="col-lg-3">Department:</div>
                                <div class="col-lg-9">
                                    <div id="div_department"></div>
                                    <select id="edit_department" name="edit_department">
                                        <?php
                                        foreach ($tblDepartment as $row) {
                                            $selected = '';
                                            if ($department == $row['DepartmentDescription'])
                                                $selected = 'selected';
                                            echo '<option value="' . $row['DepartmentID'] . '" ' . $selected . '>
                                                     ' . $row['DepartmentDescription'] . '
                                                 </option>';

                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div><!--tab-content-->
                </div>
            </form>
            <div class="col-lg-12">
                <br/>
                <br/>
                <span class="error"><?= $errormsg?></span>
                <span class="error"><?php echo validation_errors();?></span>
            </div>
        </div>
    </div>
</div>

<script>

    $(function(){
        $('#edit_birthdate').datepicker();

    })

    var photofile;
    var base_url = '<?= $base_url?>';

    $('#upload_photo').on('change', function(event){

        photofile = event.target.files[0];
        $('#formupload').submit();

    });

    $('#formupload').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();

        var form = $('#formupload');
        var data = new FormData(form[0]);

        $.ajax({
            url: form.attr('action'),
            type: "POST",
            data: data,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (data, textStatus, jqXHR)
            {
                if(data.success == true)
                {
                    $('#profilepicture').attr('src', '<?= $base_url?>images/fmis/members/' + data.user_id + '/temp.jpg');
                }
                else
                {
                    growl('Failed', data.message, 'error48');
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                // Handle errors here
                console.log('ERRORS: ' + textStatus);
                // STOP LOADING SPINNER
            }
        });

    });

    $('#addprofilesubmit').on('click', function (event){
        console.log('hey');
        $('#formaddprofile').submit();
    });
</script>